<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid基础概念</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="wrap none">
        <h2>行,列和项目的概念</h2>
        <img src="images/01.png" alt="">
    </div>
    <div class="wrap none">
        <h2>容器默认为块状元素</h2>
        <h3>块状元素(grid)</h3>
        <ul class="demo1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <h3>行内元素(inline-grid容器改为行内元素)</h3>
        <div>
            <span>左边</span>
            <ul class="demo2">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <span>右边</span>
        </div>

    </div>

    <div class="wrap none">
        <h2>定义列宽和行宽</h2>
        <h3>grid-template-columns 列属性/grid-template-rows 行属性</h3>
        <h4>grid-template-columns: 300px 300px 300px;</h4>
        <h4 class="margin-bottom-10"> grid-template-rows:300px 300px;</h4>
        <p class="margin-bottom-10">
            设置了行和列后,容器只会取 colums乘以rows的元素个数
        </p>
        <p class="margin-bottom-10">
            此时第7个元素就不管了
        </p>
        <ul class="demo3 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>


        <h4> grid-template-columns:33.33% 33.33% 33.33%</h4>
        <h4 class="margin-bottom-10"> grid-template-rows:33.33% 33.33%;</h4>
        <p>重写麻烦时可以用repeat(3, 33.33%);</p>
        <p>接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。</p>
        <p>repeat()重复某种模式也是可以的</p>
        <p>grid-template-columns: repeat(2, 30% 20%);如下图1</p>

        <ul class="demo4 margin-bottom-20">
            <li class="demo5">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
            </li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>

    </div>

    <div class="wrap none">
        <h2>定义列宽和行宽2(auto-fill关键字)</h2>
        <h3>grid-template-columns 列属性/grid-template-rows 行属性</h3>
        <h4>grid-template-columns=> auto-fill 关键字 </h4>
        <h4>rid-template-columns: repeat(auto-fill, 100px)</h4>
        <h4 class="margin-bottom-10">grid-template-rows: repeat(2, 50%);</h4>

        <p class="margin-bottom-10">

        </p>

        <ul class="demo6 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>

    </div>
    <div class="wrap none">
        <h2>定义列宽和行宽3(auto-fit关键字)</h2>
        <h3>grid-template-columns 列属性/grid-template-rows 行属性</h3>
        <h4>grid-template-columns=> auto-fit 关键字 </h4>
        <p>他的填充需要时这种不固定的(minmax)</p>
        <h4>rid-template-columns: repeat(auto-fit, minmax(100px, 1fr));</h4>
        <h4 class="margin-bottom-10">grid-template-rows: repeat(2, 50%);</h4>

        <p class="margin-bottom-10">

        </p>

        <ul class="demo7 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>


        </ul>

    </div>

    <div class="wrap none">
        <h2>定义列宽和行宽4(fr关键字)</h2>
        <h3>grid-template-columns 列属性/grid-template-rows 行属性</h3>
        <h4>rid-template-columns: 1fr 1fr;(相当于俩列各50%)</h4>
        <h4>rid-template-columns: 150px 1fr 2fr;(相当于第一列150ox 剩下空间=>第二列33.33%第三列66.66%)</h4>
        <h4>如下列</h4>

        <p class="margin-bottom-10">

        </p>

        <ul class="demo8 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>

        </ul>

    </div>

    <div class="wrap none">
        <h2>定义列宽和行宽5(minmax()关键字)</h2>
        <h3>grid-template-columns 列属性/grid-template-rows 行属性</h3>
        <h4>rid-template-columns: 1fr 1fr minmax(100px, 1fr)</h4>
        <h4>如下列</h4>
        <p class="margin-bottom-10">

        </p>

        <ul class="newdemo9">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>

        </ul>
        <p>这一行不属于上面的ul,说明 第7个超出了</p>
    </div>

    <div class="wrap none">
        <h2>定义列宽和行宽6(auto关键字)</h2>
        <h3>grid-template-columns 列属性/grid-template-rows 行属性</h3>
        <h4>rid-template-columns: 1fr auto 1fr</h4>
        <h4>如下列</h4>
        <p class="margin-bottom-10">

        </p>

        <ul class="demo9 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>

        </ul>
        <img src="images/02.png" alt="">
    </div>

    <div class="wrap none">
        <h2>行间距和列间距</h2>
        <h3>grid-gap: &lt;grid-row-gap&gt; (行间距) &lt;grid-column-gap&gt;(列间距)</h3>
        <h4>grid-gap: 20px 20px;</h4>
        <h4>如下列</h4>
        <p class="margin-bottom-10">

        </p>

        <ul class="demo10 margin-bottom-20">
            <li>185X40</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>

        </ul>
    </div>

    <div class="wrap none">
        <h2>网络布局允许指定"区域"(暂时不知道干什么)</h2>
        <h3>grid-template-areas 属性</h3>
        <p>grid-template-areas: 'a b c'</p>
        <p><span style="visibility: hidden;">grid-template-areas: </span> 'd e f'</p>
        <p><span style="visibility: hidden;">grid-template-areas: </span> 'g h i'</p>

        <p class="margin-bottom-10">

        </p>
        <ul class="demo11 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>

        </ul>

        <p>grid-template-areas: 'a a a'</p>
        <p><span style="visibility: hidden;">grid-template-areas: </span> 'b b b'</p>
        <p><span style="visibility: hidden;">grid-template-areas: </span> 'c c c'</p>
        <p class="margin-bottom-10">

        </p>
        <ul class="demo12 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>

        </ul>
    </div>

    <div class="wrap none">
        <h2>默认的放置顺序是"先行后列,grid-auto-flow: column改为先列后行</h2>
        <h3>grid-auto-flow 属性</h3>
        <h3>grid-auto-flow: column</h3>

        <p class="margin-bottom-10">
            看顺序不在是123而是147
        </p>
        <ul class="demo13 margin-bottom-30">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <h3>grid-auto-flow: row dense;</h3>
        <p class="margin-bottom-10">grid-auto-flow属性除了设置成row和column，
            还可以设成row dense和column dense。这两个值主要用于，
            某些项目指定位置以后，剩下的项目怎么自动放置。</p>

        <ul class="demo14 margin-bottom-30">
            <li style="grid-column-start: 1;
            grid-column-end: 3;">1</li>
            <li style="grid-column-start: 1;
            grid-column-end: 3;">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <h3>grid-auto-flow: column dense;</h3>
        <ul class="demo15 margin-bottom-20">
            <li style="grid-row-start: 1;
            grid-row-end: 3;">1</li>
            <li style="grid-row-start: 1;
            grid-row-end: 3;">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>

    <div class="wrap relative none">
        <h2>设置单元格内项目在单元格的位置:justify-items/align-items</h2>
        <h3>justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）</h3>
        <p> start | end | center | stretch;</p>


        <p class="margin-bottom-10">
            灰色的是每个单元格的内容空间, 粉色框是每个项目
        </p>
        <p>justify-items: left;(项目水平靠左) / align-items: center;(项目垂直居中)</p>
        <p class="margin-bottom-10">place-items: 垂直 水平</p>
        <ul class="demo16 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>

        </ul>
        <ul class="demo17 margin-bottom-20">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

        </ul>


    </div>

    <div class="wrap relative none">
        <h2>整个内容区域在容器里面的水平和垂直位置</h2>
        <h3>justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下</h3>
        <p> start | end | center | stretch | space-around | space-between | space-evenly;</p>

        <p class="red">***重点在于设置了行和列让所有的单元格不能填充整个容器***</p>
        <p class="margin-bottom-10">
            下图设置的repeat(3, 200px);所以铺不满容器
            这个时候设置justify-content就有用了.
        </p>
        <p>设置的是start所以整体靠左</p>
        <p class="margin-bottom-10">place-content: 垂直 水平</p>
        <ul class="demo18 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>

        </ul>



    </div>

    <div class="wrap relative none">
        <h2>整个内容区域在容器里面的水平和垂直位置</h2>
        <h3>grid-auto-columns 属性 / grid-auto-rows 属性</h3>
        <p></p>
        <p class="red">***重点在于本来设置了3行3列,这个时候需要单独的设置第4行或者第4列***</p>
        <!-- <p class="red"></p> -->
        <p class="margin-bottom-10">
            grid-auto-columns和grid-auto-rows相当于定默认的行高和宽高
            grid-template-columns和grid-template-rows是覆盖auto
        </p>
        <p></p>
        <ul class="demo19 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>

    <div class="wrap relative none">
        <h2>项目的属性</h2>
        <h3>grid-column-start 属性 /
            grid-column-end 属性 /
            grid-row-start 属性 /
            grid-row-end 属性</h3>
        <p></p>
        <p class="red">1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。</p>
        <!-- <p class="red"></p> -->
        <p class="margin-bottom-10">
            8和9因为超过了第3行了,所以适用grid-auto-rows:46px
        </p>
        <p class="margin-bottom-10">
            2是因为grid-auto-flow:row dense; 补充上去
        </p>
        <p></p>
        <ul class="demo20 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>

        <p class="margin-bottom-10">
            7,8和9因为超过了第3行了,所以适用grid-auto-rows:46px
        </p>
        <p class="margin-bottom-10 red">
            其中7使用关键字span => grid-column-start:span 3;
        </p>
        <p class="margin-bottom-10">
            1的参数 =>
            grid-column-start: 1 /
            grid-column-end: 3 /
            grid-row-start: 2 /
            grid-row-end: 4 /
        </p>

        <ul class="demo21 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>999999999999999999999999999999999</li>
        </ul>
        <p class="margin-bottom-20">8和9 ~start和end设置重叠了.所以通过z-index进行了设置上下级</p>

        <h2>简写方式</h2>

        <p>
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;
        </p>
        <p>
            grid-column: 1 / 3;
            grid-row: 1 / 3;
        </p>
        <p>
            grid-column: 1 / span 2;
            grid-row: 1 / span 2;
        </p>
    </div>

    <div class="wrap relative none">
        <h2>项目的属性grid-area: e;</h2>
        <p>grid-template-areas: 'a b c'</p>
        <p><span style="visibility: hidden;">grid-template-areas: </span> 'd e f'</p>
        <p><span style="visibility: hidden;">grid-template-areas: </span> 'g h i'</p>
        <h3>1号项目元素设置grid-area: e;</h3>
        <p></p>

        <!-- <p class="red"></p> -->


        <p></p>
        <ul class="demo22 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>

        <p>grid-template-areas: 'a a a'</p>
        <p><span style="visibility: hidden;">grid-template-areas: </span> 'b b b'</p>
        <p><span style="visibility: hidden;">grid-template-areas: </span> 'c c c'</p>
        <h3>1号项目元素设置grid-area: b;</h3>
        <ul class="demo23 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>

    <div class="wrap relative ">
        <h2>justify-self 属性 /
            align-self 属性 /
            place-self 属性</h2>
        <p>justify-self属性设置单元格内容的水平位置（左中右），<br>跟justify-items属性的用法完全一致，但只作用于单个项目。
        </p>
        <p>align-self属性设置单元格内容的垂直位置（上中下），<br>跟align-items属性的用法完全一致，也是只作用于单个项目。</p>

        <h3></h3>
        <p></p>

        <p class="red margin-bottom-10">项目1和项目2就设置了独立的位置</p>


        <p class="margin-bottom-10">place-self:align-self(垂直) justify-self(水平)</p>
        <ul class="demo24 margin-bottom-20">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <ul class="demo25 margin-bottom-20 none">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>


    </div>
</body>

</html>